<template>
  <view class="index">
    <view class="mainContent">
      <button class="btn" open-type="getPhoneNumber" @getphonenumber="phoneClk">
        <img src="https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/button.png" alt="" />
      </button>
    </view>
  </view>
</template>

<script setup>
import Taro from "@tarojs/taro";
import { ref, onMounted } from "vue";
import { userKey, phoneKey } from '../../constants'
import { getDate } from '../../utils'

onMounted(async () => {
  const phone = await Taro.getStorageSync(phoneKey)
  if (phone) {
    Taro.navigateTo({
      url: `/pages/home/index`,
    });
  }
})

function jumpHome(params) {
  Taro.navigateTo({
    url: `/pages/home/index`,
  });
}

function phoneClk(e) {
  if (e.detail.errMsg === "getPhoneNumber:ok") {
    Taro.cloud.callFunction({
      name: 'getPhone',
      data: {
        code: e.detail.code,
      },
      success: async (res) => {
        const phoneNumber = res.result.phoneInfo.phoneNumber
        await Taro.setStorageSync(phoneKey, phoneNumber)
        Taro.cloud.callFunction({
          name: 'countPlayers',
          data: {
            phone: phoneNumber,
            type: 1,
            createDate: getDate()
          }
        })
        Taro.navigateTo({
          url: `/pages/home/index`,
        });
      },
      fail: err => {
      }
    })
  }
}
</script>

<style lang="css">
.index {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 814px;
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/home.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.mainContent {
  width: 100%;
  position: absolute;
  bottom: 100px;
}

.mainContent .btn {
  width: 275px;
  height: 90px;
  padding: 0;
  border: none;
  text-align: center;
  background: transparent;
}

.mainContent .btn img {
  height: 100%;
  width: 100%;
}

button.btn::after {
  border: none;
}
</style>
